import MapLocateAction from "./SubAction/MapLocateAction.js";
import FetchSelectOptionsAction from "./SubAction/FetchSelectOptionsAction.js";
import FieldTransformAction from "./SubAction/FieldTransformAction.js";
import SaveModelDataAction from "./SubAction/SaveModelDataAction.js";
import InsertModelDataAction from "./SubAction/InsertModelDataAction.js";

class Action {
  constructor(options) {
    let plusValue = options?.plusValue || "";
    this.uuid =options?.uuid || Date.now().toString() + plusValue;
    //类型，包括fetch-data、field-transform、map-action、call-api、fetch-select-options、upload-img、upload-file、save-model-data
    this.key = options?.key;
    this.type = options?.type || type;
    this.api = options?.api || "";
    this.method = options?.method || "POST";
    this.params = options?.params || {};
    this.field = options?.field || "";
    this.targetField = options?.targetField || "";

    // 设置默认值
    if (this.type === 'fetch-model-data') {
      this.params["id"] = this.params["id"] || "modelId";
      this.params["name"] = this.params["name"] || "modelName";
    }
    else if (this.type === 'upload-img') {
      this.params["filename"] = this.params["filename"] || "image.jpg";
      this.params["storeType"] = this.params["storeType"] || "base64";
      this.params["base64"] = this.params["base64"] || "base64://img";
      this.params["file"] = this.params["file"] || "[FILE]";
    }
    else if (this.type === 'upload-file') {
      this.params["filename"] = this.params["filename"] || "file.txt";
      this.params["file"] = this.params["file"] || "[FILE]";
    }
    else if (this.type === 'save-model-data') {
    }
    let SubAction = this.getSubActionType(this.type);
    if (SubAction) {
      SubAction.createInitParam(this);
    }
  }
  showActionConfig(actionConfigPanel) {
    let action = this;
    let html = `<div class="form-group"><label>动作类型</label><input type="text" value="${action.type}" disabled /></div>`;
    if (action.type === 'upload-img' || action.type === 'upload-file'
       || action.type === 'fetch-model-data'
      || action.type === 'fetch-select-options'
    ) {
      html += `
          <div class="form-group">
            <label>API地址</label>
            <input type="text" id="actionApi" value="${action.api}" />
          </div>
          <div class="form-group">
            <label>请求方法</label>
            <input type="text" id="actionMethod" value="${action.method}" />
          </div>
        `;
    }
    if (action.type === 'fetch-model-data') {
      html += action.renderFetchModelData();
    }
    else if (action.type === 'upload-img') {
      html += action.renderUploadImage();
    }
    else if (action.type === 'upload-file') {
      html += action.renderUploadFile();
    }
    let SubAction = this.getSubActionType(action.type);
    if (SubAction) {
      html += SubAction.renderActionConfig(action);
    }

    html += `
        <div class="form-group">
          <button class="btn" onclick="applyActionConfig()" style="width: 100%; margin-top: 10px;">应用更改</button>
        </div>
      `;
    actionConfigPanel.innerHTML = html;
  }
  renderUploadImage() {
    let action = this;
    let html = `
          <div class="form-group">
            <label>文件名</label>
            <input type="text" id="actionFilename" value="${action.params["filename"]}" />
          </div>
          <div class="form-group">
            <label>存储类型</label>
            <select id="actionStoreType">
              <option value="base64" ${action.params["storeType"] === "base64" ? "selected" : ""}>base64</option>
              <option value="file" ${action.params["storeType"] === "file" ? "selected" : ""}>file</option>
            </select>
          </div>
          <div class="form-group">
            <label>Base64(代码自动补充)</label>
            <input type="text" id="actionImageBase64" value="${action.params["base64"]}" />
          </div>
          <div class="form-group">
            <label>文件内容(代码自动补充)</label>
            <input type="text" id="actionImageFile" value="${action.params["file"]}" />
          </div>
        `;
    return html;
  }
  renderUploadFile() {
    let action = this;
    let html = `
          <div class="form-group">
            <label>文件名</label>
            <input type="text" id="actionFilename" value="${action.params["filename"]}" />
          </div>
          <div class="form-group">
            <label>文件内容(代码自动补充)</label>
            <input type="text" id="actionImageFile" value="${action.params["file"]}" />
          </div>
        `;
    return html;
  }
  renderFetchModelData() {
    let action = this;
    let html = `
          <div class="form-group">
            <label>模型ID(代码自动设置)</label>
            <input type="text" id="actionModelIdField" value="${action.params["id"]}" />
          </div>
          <div class="form-group">
            <label>模型名称(代码自动设置)</label>
            <input type="text" id="actionModelNameField" value="${action.params["name"]}" />
          </div>
        `;
    return html;
  }


  collectActionConfig() {
    let action = this;
    action.api = document.getElementById("actionApi")?.value;
    action.method = document.getElementById("actionMethod")?.value;
    action.field = document.getElementById("actionField")?.value;
    action.targetField = document.getElementById("actionTargetField")?.value;
    if (this.type === 'upload-img') {
      action.params["filename"] = document.getElementById("actionFilename").value;
      action.params["storeType"] = document.getElementById("actionStoreType").value;
      action.params["base64"] = document.getElementById("actionImageBase64").value;
      action.params["file"] = document.getElementById("actionImageFile").value;
    }
    else if (this.type === 'upload-file') {
      action.params["filename"] = document.getElementById("actionFilename").value;
      action.params["file"] = document.getElementById("actionImageFile").value;
    }
    else if (this.type === 'fetch-model-data') {
      action.params["id"] = document.getElementById("actionModelIdField").value;
      action.params["name"] = document.getElementById("actionModelNameField").value;
    }
    let SubAction = this.getSubActionType(action.type);
    if (SubAction) {
      SubAction.collectActionConfig(action);
    }
  }
  getSubActionType(type) {
    let s = [MapLocateAction, FetchSelectOptionsAction, FieldTransformAction, SaveModelDataAction, InsertModelDataAction];
    for (var i = 0; i < s.length; i++) {
      if (s[i].filterActionType == type) {
        return s[i];
      }
    }
    return null;
  }
}
export default Action;